import React,{useState,useEffect} from 'react'
import { Table,Button,Modal,Tree } from 'antd'
import axios from 'axios';
import {DeleteOutlined,EditOutlined,ExclamationCircleOutlined} from '@ant-design/icons'

export default function RoleList() {
    const { confirm } = Modal;
    // 角色列表
    const [dataSource, setdataSource] = useState([]);
    // 角色权限列表
    const [rightList, setrightList] = useState([]);
    // 当前被选中的列表
    const [currentRights, setcurrentRights] = useState([]);
    // 被修改的角色的id
    const [currentId, setcurrentId] = useState(0);
    // modal是否被打开
    const [isModalOpen,setisModalOpen] = useState(false);

    // 请求角色列表数据并渲染
    useEffect(() => {
        axios.get(`/roles`).then(res=>{
            // console.log(res.data);
            setdataSource(res.data)
        })
    }, []);

    // 请求角色权限列表数据并渲染
    useEffect(() => {
        axios.get(`/rights?_embed=children`).then(res=>{
            // console.log(res.data);
            setrightList(res.data)
        })
    }, []);

    // 是否删除对话框
    const confirmMethods=(item)=>{
        confirm({
            title: '您确定要删除吗？',
            icon: <ExclamationCircleOutlined />,
            content: 'Some descriptions',
        
            onOk() {
                deleteMethod(item);
            },
        
            onCancel() {
              
            },
          });
    }
    // 实现删除角色项逻辑
    const deleteMethod =(item)=>{
        // 过滤掉要删除的项目，渲染dataSource
        setdataSource(dataSource.filter(data=>{
            return data.id!==item.id;
        }))
        // 删除后端角色
        axios.delete(`/roles/${item.id}`)  
    }

    // 确认编辑角色权限
    const handleOk=()=>{
        setisModalOpen(false);

        //同步重新渲染dataSource
        setdataSource(dataSource.map(item=>{
            if(item.id===currentId){
                return {
                    ...item,
                    rights:currentRights
                }
            }
            return item
        }))

        // 修改后端数据
        axios.patch(`/roles/${currentId}`,{
            rights:currentRights
        })

    }
    // 取消编辑角色权限
    const handleCancel=()=>{
        setisModalOpen(false);
    }
    
    //监听角色权限被选中状态
    const onCheck=(checkedKeys)=>{
        setcurrentRights(checkedKeys.checked)
    }

    // 渲染角色列表数据
    const columns=[
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title:'角色名称',
            dataIndex: 'roleName',
        },
        {
            title:'操作',
            // item传递当前行的数据
            render:(item)=>{
                return (
                    <div>
                        {/* 删除按钮 */}
                        <Button className='rightMargin' danger shape="circle" icon={<DeleteOutlined />}
                        onClick={()=>confirmMethods(item)}
                        ></Button>
                        {/* 修改按钮 */}
                        <Button type="primary" shape="circle" icon={<EditOutlined />} 
                        onClick={()=>{
                            // 打开对话框
                            setisModalOpen(true)
                            // 渲染被选中的权限
                            setcurrentRights(item.rights)
                            // 传递当前角色项的id
                            setcurrentId(item.id)
                        }}></Button>
                    </div>
                )
            }
        }
    ];

    // 页面视图
    return (
        <div>
            {/* 表格 */}
            <Table dataSource={dataSource} columns={columns} rowKey={(item)=>item.id}></Table>
            {/* 权限分配对话框 */}
            <Modal title="权限分配" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                {/* 树状表 */}
                <Tree
                checkable
                // 被选中的角色权限
                checkedKeys={currentRights}
                // 检查被选中的状态
                onCheck={onCheck}
                // 渲染树形表
                treeData={rightList}
                // 是否为受控组件属性
                checkStrictly={true}
                />
            </Modal>
        </div>
    )
}
